p<template>
  <div class="admin">
    <el-button class="top" @click="$router.push('/addGoods')" type="primary"
      >添加</el-button
    >
    <el-table
      :data="goodsList"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      style="width: 100%"
    >
      <el-table-column prop="id" label="商品编号" width="120">
      </el-table-column>
      <el-table-column prop="goodsname" label="商品名称" width="120">
      </el-table-column>
      <el-table-column prop="price" label="商品价格" width="120">
      </el-table-column>
      <el-table-column prop="market_price" label="市场价格" width="120">
      </el-table-column>
      <el-table-column label="图片" width="120">
        <template #default="{ row: { img } }">
          <img class="img" :src="$pregImg + img" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="是否热卖" width="120">
        <template #default="{ row: { ishot } }">
          <el-tag v-if="ishot==1" type="dark" effect="plain">是</el-tag>
          <el-tag v-if="ishot==2" type="danger" effect="plain">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否新品" width="120">
        <template #default="{ row: { isnew } }">
          <el-tag v-if="isnew==1" type="dark" effect="plain">是</el-tag>
          <el-tag v-if="isnew==2" type="danger" effect="plain">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="120">
        <template #default="{ row: { status } }">
          <el-tag type="success" vla>正常</el-tag>
          <el-tag type="danger" v-show="status === 2">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row: { uid } }">
          <el-button
            type="primary"
            @click="$router.push({ path: '/setUser', query: { uid } })"
            size="mini"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="del(id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="SizeChange"
      @current-change="CurrentChange"
      :current-page="config.page"
      :page-sizes="[2, 3,4]"
      :page-size="config.size"
      layout="total, sizes, prev, pager, next"
      :total="total"
      background
    >
    </el-pagination>
  </div>
</template>
<script>
import { getGoodsApi, getTotalPageApi,getCateApi, delSpecsApi } from "@/api/goods";
export default {
  data() {
    return {
      goodsList: [],
      total: 0,
      config: {
        page: 1,
        size: 2,
      },
    };
  },
  async mounted() {
    await this.getSFid()
    this.getList();
    this.getTotal();
  },
  methods: {
    async del(id) {
      let res = await delSpecsApi(id);
      if (res.code == 200) {
        alert(res.msg);
        this.getList();
        this.getTotal();
      } else {
        alert(res.msg);
      }
    },
    //获取sid，fid
    async getSFid(){
      let res=await getCateApi({istree:true})
      console.log(res.list,11111);
    },
    //获取列表
    async getList() {
      let res = await getGoodsApi(this.config);
      this.goodsList = res.list
      console.log(res);
    },
    //获取总数
    async getTotal() {
      let res = await getTotalPageApi();
      this.total = res.list[0].total;
      console.log(res.list[0].total);
    },
    async SizeChange(val) {
      this.config.size = val;
      this.config.page = 1;
      let res = await getGoodsApi(this.config);
      this.adminList = res.list;
    },
    async CurrentChange(val) {
      this.config.page = val;
      let res = await getGoodsApi(this.config);
      this.adminList = res.list;
    },
  },
};
</script>
<style lang="less" scoped>
.admin {
  .el-pagination {
    text-align: right;
    margin: 10px;
  }
  .top {
    margin-bottom: 20px;
  }
}
.miaoshu {
  display: inline-block;
  padding: 5px;
  margin: 0 8px 0 0;
  background: skyblue;
  border-radius: 3px;
}
.img {
  width: 50px;
}
</style>

